﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>@ViewBag.Title</title>
	<meta name="viewport" content="width=device-width" />
	<style type="text/css">
		#backToTop
		{
			position: fixed;
			top: 0px;
			left: 0px;
			display: none;
		}
	</style>
	@Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
	@Scripts.Render("~/bundles/jquery")
	@Scripts.Render("~/bundles/modernizr")
	@Scripts.Render("~/bundles/knockout")
</head>
<body>
	<div data-role="page" data-theme="a">
		@Html.Partial("_ViewSwitcher")

		@if (Request.IsAuthenticated)
		{
			<div data-role="header">
				<h1>@ViewBag.Title</h1>
				<a href="@Url.Action("Index", "Home")" data-icon="back" class="ui-btn-right">Home</a>
			</div>
		}

		<div data-role="content">
			@if (Request.IsAuthenticated)
			{
				<text>
				Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })!
				@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
				{
					@Html.AntiForgeryToken()
					<a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
				}
				</text>
			}

			@RenderSection("featured", false)
			@RenderBody()

			@Scripts.Render("~/bundles/jquerymobile")
			<script type="text/javascript">
				var backToTop = {
					init: function () {
						$('html, body').append('<a href="" id="backToTop" data-role="button" data-icon="arrow-u" data-theme="b">Back to top</a>');
						$('#backToTop').click(backToTop.click);
						$(window).bind('scrollstart', backToTop.scrollStart);
						$(window).bind('scrollstop', backToTop.scrollStop);
						$('body').trigger('create');
					},
					click: function () {
						$('html, body').animate({ scrollTop: 0 }, 800);
					},
					scrollStart: function () {
						$('#backToTop').hide();
					},
					scrollStop: function () {
						var windowHeight = $(window).height();
						if (window.pageYOffset > windowHeight) {
							$('#backToTop').fadeIn('slow');
						}
					}
				};

				$(document).bind("mobileinit", function () {
					// jQuery Mobile's Ajax navigation does not work in all cases (e.g.,when navigating from a mobile to a non-mobile page), 
					// especially when going back, hence disabling it.
					//backToTop.init();

					$.mobile.ajaxEnabled = false;
					$.mobile.allowCrossDomainPages = true;
				});

				$(document).delegate('a.top', 'click', function () {
					$('html, body').stop().animate({ scrollTop : 0 }, 500);
					return false;
				});​
			</script>
		</div>
		<div id="invalid-view-dialog" data-role="dialog" data-title="Invalid Note" data-theme="a">
			<div data-role="header" data-theme="a">
				<h1>Error!!!</h1>
			</div>
			<div data-role="content">Error has occurred in web application.</div>
		</div>

	</div>
</body>
</html>
